<template>
  <div class="tab">
    <div v-for="(item, index) in tabs" :key="index" :class="{ 'active': tabIndex === index }"
      @click="change(item, index)">{{ item.name }}</div>
  </div>
  <component :is="curCmp" />
</template>
<!--另一种方式-->
<!-- <script lang="ts">
import A1 from './10动态组件/A.vue'
import B1 from './10动态组件/B.vue'
import C1 from './10动态组件/C.vue'
  export default {
    components: {
      A1, B1, C1
    }
  }
</script> -->
<script setup lang='ts'>
import { ref, reactive, shallowRef, markRaw } from 'vue'
import A from './10动态组件/A.vue'
import B from './10动态组件/B.vue'
import C from './10动态组件/C.vue'
const tabs = ref([
  {
    name: '首页',
    cmp: markRaw(A)
  },
  {
    name: '系统设置',
    cmp: markRaw(B)
  },
  {
    name: '个人中心',
    cmp: markRaw(C)
  },
])
// 另一种方式
// const tabs1 = ref([
//   {
//     name: '首页',
//     cmp: 'A1'
//   },
//   {
//     name: '系统设置',
//     cmp: 'B1'
//   },
//   {
//     name: '个人中心',
//     cmp: 'C1'
//   },
// ])
const tabIndex = ref(0)
const change = (item: any, index: number) => {
  tabIndex.value = index
  curCmp.value = item.cmp
}
const curCmp = shallowRef(A)
</script>

<style lang='scss' scoped>
.tab {
  display: flex;

  div {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  .active {
    background-color: aqua;
    border-color: aqua;
  }
}
</style>